<template>
    <div class="content">


        <!--头部-->
        <div class="header-setting">
            <a-breadcrumb class="breadcrumb">
                <a-breadcrumb-item>
                    <a href="../main">首页</a>
                </a-breadcrumb-item>
                <a-breadcrumb-item>设备管理</a-breadcrumb-item>
                <a-breadcrumb-item>型号管理</a-breadcrumb-item>
            </a-breadcrumb>
            <!--查询条件-->
            <!--<div class="box-condition-body">
                <div class="box-condition-item">
                    <div style="margin: 0 50px">型号名称</div>
                    <template>
                        <a-input style="margin: 0 200px 0 50px" placeholder="请输入型号名称" v-model="inputEquipmentModel"
                                 @pressEnter="queryData"/>
                    </template>
                </div>
            </div>-->
        </div>

        <div class="box-form">
            <!--工具栏-->
            <div class="box-tool">
                <div></div>
                <div style="display: flex">
                    <a-button type="primary" @click="addClick" icon="plus">添加</a-button>
                    <a-button type="primary" @click="editClick" icon="edit">编辑</a-button>
                    <a-popconfirm title="确认删除？" okText="确认" cancelText="取消"
                                  @confirm="deleteClick">
                        <a-button type="danger" icon="delete">删除</a-button>
                    </a-popconfirm>

                </div>
            </div>

            <!--数据表格-->
            <div class="box-table">
                <a-table :columns="columns"
                         :dataSource="dataSource"
                         :pagination="pagination"
                         bordered size="small"
                         :scroll="scroll"
                         :customRow="tableCustomRow"
                         :rowClassName="setRowClassName"
                >
                </a-table>
            </div>

        </div>
    </div>
</template>

<script>

    import AddPagesUtils from "../../utils/AddPagesUtils";
    import Constant from "../../utils/Constant";
    import EquipmentModelManageApi from '../../api/equipment/EquipmentModelManage';

    const columns = [
        {
            title: "id"
            , dataIndex: "id"
            , width: '10%'
            , sorter: (a, b) => a.key - b.key
        },
        {
            title: "设备型号"
            , dataIndex: "modelCode"
            , width: '10%'
            , sorter: (a, b) => a.key - b.key
        },
        {
            title: "创建人"
            , dataIndex: "nickName"
            , width: '10%'
            , sorter: (a, b) => a.key - b.key
        },
        {
            title: "创建时间"
            , dataIndex: "createdTime"
            , width: '10%'
            , scopedSlots: {customRender: 'deviceEnergy'}
            , sorter: (a, b) => a.key - b.key
        }
    ];
    /*设备查询条件*/
    const addCondition = {
        modelCode: ""
    };

    const editCondition = {
        modelCode: "",
        id: ""
    };
    const deleteCondition = {
        id: "",
    };


    export default {
        name: "EquipmentModelManage",
        data() {
            return {
                /*查询条件*/
                /*当前选中的行数据*/
                currTableRowData: "",
                columns,
                dataSource: [],
                selectId: -1,

                /*分页插件*/
                pagination: {
                    showTotal: total => `共${total}条`,
                    defaultCurrent: 1,
                    showQuickJumper: true,
                    defaultPageSize: 10
                },
                /*表格固定头部*/
                scroll: {
                    y: 550,
                },
                tableState: {
                    rowId: -1,
                },
                inputEquipmentModel: "",
                addCondition,
                editCondition,
                deleteCondition,
            }
        },
        methods: {
            addClick() {
                AddPagesUtils.showAddPages(Constant.viewType.EQUIPMENT_MODEL_ADD, null, this.doAddOperate);
            },
            doAddOperate(data) {
                //1 新增 2修改
                let sign = data.sign;
                let equipmentModel = data.equipmentModel;
                if (sign == 1) {
                    let addCondition1 = this.addCondition;
                    addCondition1.modelCode = equipmentModel.trim();
                    EquipmentModelManageApi.addDeviceType(addCondition1).then(() => {
                        this.$message.success("添加成功！");
                        this.queryData();
                    }).catch(err => {
                        let data = err.data;
                        let msg = err.msg;
                        if (data) {
                            return this.$message.warn(data);
                        }
                        if (msg) {
                            return this.$message.warn(msg);
                        }
                    });
                } else if (sign == 2) {
                    let dataId = this.currTableRowData.id;
                    let editCondition1 = this.editCondition;
                    editCondition1.modelCode = equipmentModel;
                    editCondition1.id = dataId;
                    EquipmentModelManageApi.updateDeviceType(editCondition1).then(() => {
                        this.$message.success("修改成功！");
                        this.queryData();
                        this.currTableRowData = "";
                    }).catch(err => {
                        let data = err.data;
                        if (data) {
                            return this.$message.warn(data);
                        }
                        //因启动报错添加 TODO hx
                        var msg;
                        if (msg) {
                            return this.$message.warn(msg);
                        }
                    });
                }


            },
            editClick() {
                let dataId = this.currTableRowData.id;
                if (dataId == undefined || dataId == '') {
                    return this.$message.warn("请选择编辑的数据！");
                }
                let dataModelCode = this.currTableRowData.modelCode;
                AddPagesUtils.showAddPages(Constant.viewType.EQUIPMENT_MODEL_EDIT, dataModelCode, this.doAddOperate);
            },
            deleteClick() {
                let dataId = this.currTableRowData.id;
                if (dataId == undefined || dataId == '') {
                    return this.$message.warn("请选择删除的数据！");
                }
                let condition = this.deleteCondition;
                condition.id = dataId;
                EquipmentModelManageApi.delDeviceType(condition).then(() => {
                    this.$message.success("删除成功！");
                    this.queryData();
                    this.currTableRowData = "";
                }).catch(err => {
                    console.log("删除车型数据异常！", err);
                })
            },

            queryData() {
                EquipmentModelManageApi.getDeviceTypeList().then((data) => {
                    this.dataSource = data.data;
                }).catch(error => {
                    console.log("查询设备型号列表异常！", error);
                });
            },

            setRowClassName(record) {
                return record.id === this.tableState.rowId ? 'clickRowStyl' : '';
            },
            /*表格*/
            tableCustomRow(record) {
                return {
                    on: { // 事件
                        click: () => {
                            this.currTableRowData = record;
                            this.tableState.rowId = record.id;
                        },       // 点击行
                    },
                }
            },
        },
        computed: {
            computedStyle() {
                return function (selectId) {
                    return this.selectId == selectId ? "background-color: #FF7965" : "";
                }
            },
        },
        mounted() {
            this.queryData();
        }

    }
</script>

<style>
    /*组件样式*/
    /*文本框*/
    .ant-input {
        width: 200px;
        margin: 0 8px 8px 0;
    }

    .clickRowStyl {
        background-color: #C1E0FD;
    }

    .content {
        width: 100%;
        height: 100%;
    }

    .header-setting {
        width: 100%;
        height: 174px;
        background: #fff;
    }

    .header-setting .breadcrumb {
        margin-left: 41px;
        padding-top: 15px;
    }

    /* 表单 */
    .box-form {
        padding-left: 40px;
        padding-right: 40px;
        min-height: 705px;
        background: #fff;
        margin-top: 8px;
    }

    .box-form .box-tool {
        padding-top: 11px;
        margin: 8px 0;
        width: 100%;
        /* flex */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    .box-condition-item {
        display: flex;
        align-items: center;
        min-width: 1500px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 5px 0;
    }

    .button_online {
        margin-left: 62px;
        display: flex;
    }

    .button_online button {
        margin-right: 10px;
    }

    .box-tool button {
        margin-right: 10px;
    }


</style>
